<template>
    <div class="mt50 mb50">
        <!-- 按钮 -->
        <a-row :gutter="[16, 48]" align="middle" style="margin: 0 10%;">
            <a-col v-for="(item, index) in buttons" :key="index"
                   :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
                <a-button type="default" 
                          shape="round"
                          size="large">
                    <div class="w150 bold">{{ item.title }}</div>
                </a-button>
            </a-col>
        </a-row>
        <!-- 课程进度列表 -->
        <a-row :gutter="[64, 64]" align="middle" style="margin: 0 10%;">
            <a-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
                <a-card hoverable>
                    <a-row>
                        <a-col :span="6">
                            <img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
                        </a-col>
                        <a-col :span="18">
                            <a-card-meta title="Card title" description="This is the description">
                            </a-card-meta>
                        </a-col>
                    </a-row>
                    <!-- <div>
                        <img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
                    </div>
                    <a-card-meta title="Card title" description="This is the description">
                    </a-card-meta> -->
                </a-card>
            </a-col>
            <a-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
                <a-card hoverable>
                    <a-card-meta title="陈氏太极拳12aaa">
                        <template #description>
                            <div class="bg_orange">太极 健康 运动 养生</div>
                        </template>
                    </a-card-meta>
                    <div class="mt20 mb15 light_gray">
                        <hr/>
                    </div>
                    <a-button type="primary" shape="round">立即观看</a-button>
                </a-card>
            </a-col>
        </a-row>
        <a-row class="mt100" :span="24">
            <a-pagination :total="50" show-size-changer />
        </a-row>
    </div>
</template>

<script>
export default {
    data() {
        return {
            buttons:[{
                    title: '精品课程'
                }, {
                    title: '分类课程'
                }, {
                    title: '课程进度'
                }, {
                    title: '专家介绍'
                }
            ]
        }
    }
}
</script>

<style>

</style>